<template>
    <div class="login-wrap">
        <div class="ms-login">
            <div class="ms-title" style="color:black;">哔哩哔哩数据分析平台注册</div>
            <el-form :model="registerForm" :rules="rules" class="ms-content" label-position="left"
                     label-width="0px" v-loading="loading">
                <el-form-item prop="username">
                    <el-input v-model="user.account" placeholder="账号(使用手机号码)" clearable @blur="email_tel"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input v-model="user.pwd" placeholder="密码" show-password></el-input>
                </el-form-item>
                <el-form-item prop="passwordConfirm">
                    <el-input v-model="pwd" placeholder="确认密码"    show-password ></el-input>
                </el-form-item>

                <el-form-item style="width: 100%">
                    <el-button type="primary" style="width: 100%;background: #505458;border: none;" v-on:click="register">立即注册</el-button>
                </el-form-item>
                <el-form-item style="width: 100%">
                    <el-button type="primary" style="width: 100%;background: #505458;border: none;" v-on:click="goto">返回</el-button>
                </el-form-item>
            </el-form>
        </div>

    </div>

</template>

<script>
    import axios from 'axios'
    export default {
        data() {
            return {
                message:'',
                ruleFlag:0,
                state:0,
                pwd:'',
                user:{
                    account:'',
                    pwd:'',
                    nickname:''
                },
            }
        },
        methods: {
            register(){
                if(this.user.account==''||this.user.pwd==''){
                    //alert("账号不能为空");
                    this.$alert('账号密码不能为空', '注册提示', {
                        confirmButtonText: '知道了，马上去填写',})
                }
                else if(this.pwd!=this.user.pwd){
                    this.$alert( '两次密码不一致', {confirmButtonText: '知道了',})
                }
                else if(this.ruleFlag==1){
                    this.$alert( '请输入正确的手机号作为账号', {confirmButtonText: '知道了',})
                }
                else{
                    console.log(this.user)
                    axios.post('http://localhost:8888/register',this.user)
                        .then(res=>{
                            //注册成功就返回登录页面
                            if(res.data.code==2000){
                                this.$alert( '注册成功', {confirmButtonText: '知道了',})
                                this.$router.push('/login');
                            }
                            else if(res.data.code==2001){
                                this.$alert( '该账号已存在', {confirmButtonText: '知道了',})
                            }

                        })
                }

            },
            goto(){
                this.$router.push('/login');
            },
            cpmpare(e){
                if(this.pwd==this.user.pwd){
                    this.state=1;
                }
                else{
                    this.state=0;
                    this.$alert( '两次密码不一致', {confirmButtonText: '知道了',})
                }
                console.log(this.state);
                console.log(e);
            },
            email_tel(){
                var verify = (/^\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/);
                var verify1=(/^1[3456789]\d{9}$/)
                if ((verify.test(this.user.account))||(verify1.test(this.user.account))) {
                    this.message = ''
                    this.ruleFlag=0;
                } else {
                    this.message = '请输入正确手机号'
                    this.ruleFlag=1;
                }

            }
        }

    };
</script>

<style>
    .login-wrap {
        position: relative;
        width: 100%;
        height: 100%;
        background-image: url(../../assets/img/login-bg.jpg);
        background-size: 100%;
    }
    .ms-title {
        width: 100%;
        line-height: 50px;
        text-align: center;
        font-size: 20px;
        color: #fff;
        border-bottom: 1px solid #ddd;
    }
    .ms-login {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 350px;
        margin: -190px 0 0 -175px;
        border-radius: 5px;
        background: rgba(255, 255, 255, 0.3);
        overflow: hidden;
    }
    .ms-content {
        padding: 30px 30px;
    }
    .login-btn {
        text-align: center;
    }
    .login-btn button {
        width: 100%;
        height: 36px;
        margin-bottom: 10px;
    }
    .login-tips {
        font-size: 12px;
        line-height: 30px;
        color: #fff;
    }
    .login-container {
        border-radius: 15px;
        background-clip: padding-box;
        margin: 160px auto;
        width: 350px;
        padding: 35px 35px 15px 35px;
        background: #fff;
        border: 1px solid #eaeaea;
        box-shadow: 0 0 25px #cac6c6;
    }
    .login_title {
        margin: 0px auto 40px auto;
        text-align: center;
        color: #505458;
    }
</style>
